<template>
	<view class="wrap">
		<u-row gutter="12">
			<u-col span="4">
				<view> 国别/地区*：</view>
			</u-col>
			<u-col span="8">
<!-- 				<u-field @click="region_show" v-model="region_value" 
						:disabled="true"  :placeholder="region"
						right-icon="arrow-down-fill"
						>
						</u-field>
						<u-action-sheet @click="confirm_region" :list="region_list" v-model="regionIsshow"></u-action-sheet> -->
						
						
	<!-- 			<u-input v-model="region_value" :type="type" :border="border" @click="region_show = true" :placeholder="region" />
						<u-action-sheet :list="region_list" v-model="region_show" @click="confirm_region"></u-action-sheet> -->
				<u-select v-model="regionIsshow" :list="region_list" @confirm="confirm_region"></u-select>
				<u-button @click="regionIsshow = true">{{ region }}</u-button>
			</u-col>
		</u-row>
		<u-row gutter="12" justify="space-between">
			<u-col span="4">
				<view> 商品*：</view>
			</u-col>
			<u-col span="8">
				<u-select v-model="commodity_show" :list="commodity_list" @confirm="confirm_commodity"></u-select>
				<u-button @click="commodity_show = true">{{ commodity }}</u-button>
			</u-col>
		</u-row>
		<u-row gutter="12" justify="space-between">
			<u-col span="4">
				<view> 金额(万美元)*：</view>
			</u-col>
			<u-col span="8">
				<u-input v-model="money_value" type="number" :border="border"/>
		
			</u-col>
		</u-row>
		<u-button type="success" @click="submit">成功按钮</u-button>
	</view>
</template>

<script>
	export default {

		components: {

		},

		data() {
			return {
				border:true,
				region: '请选择国别/地区',
				region_value: '',
				commodity: '商品',
				commodity_value: '',
				money: '请选择国别/地区',
				money_value: '',
				regionIsshow: false,
				commodity_show:false,

				region_list: [
					{
						value: '0',
						label: '港澳'
					},
					{
						value: '1',
						label: '台湾'
					},
					{
						value: '2',
						label: '日本'
					},
					{
						value: '3',
						label: '韩国'
					},
					{
						value: '4',
						label: '印度'
					},
					{
						value: '5',
						label: '东盟'
					},
					{
						value: '6',
						label: '中东'
					},
					{
						value: '7',
						label: '海湾六国'
					},
					{
						value: '8',
						label: '非洲'
					},
					{
						value: '9',
						label: '欧盟'
					},
					{
						value: '10',
						label: '俄罗斯'
					},
					{
						value: '11',
						label: '美国'
					},
					{
						value: '12',
						label: '加拿大'
					},
					{
						value: '13',
						label: '中南美洲'
					},
					{
						value: '14',
						label: '澳大利亚'
					}
				],
				
				commodity_list: [],
				money_list: [],


			}
		},
		onLoad() {

		},
		methods: {
			confirm_region(e) {
				this.region = e[0].label
				this.region_value = e[0].value

				// this.region_value = this.region_list[index].text;
				console.log(e);
			},
			confirm_commodity(e) {
				this.commodity = e[0].label
				this.commodity_value = e[0].value
				console.log(e);
			},
			region_show(){
				this.regionIsshow = true
			},
			submit(){
				console.log('当前值为: ' + this.money_value )
			}

		},



	}
</script>


<style lang="scss">
	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>
